<template>
  <div class="basetable-container">
    <el-table
      :data="tableData"
      style="width: 100%"
      :header-row-style="{color:'#56bcff',height:'80px'}"
      :header-align="'center'"
      @row-click="handleRowClick"
      highlight-current-row
    >
      <el-table-column
        v-for="item in tableSet.clos"
        :key="item.index"
        :prop="item.prop"
        :label="item.label"
        :align="item.align"
        :width="item.width"
      >
        <template slot-scope="scope">
          <div v-if="item.prop == 'url'">
            <img :src="scope.row.url" class="user-logo" />
          </div>
          <div v-else>
            <span>{{scope.row[item.prop]}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="operation" :align="'center'">
        <template slot-scope="scope">
          <el-dropdown>
            <span class="el-dropdown-link">
              <i
                class="el-icon-more"
                style="color:#53bcff;font-size:34px;cursor: pointer;"
                @click="handleClick(scope.row)"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>edit</el-dropdown-item>
              <el-dropdown-item>delete</el-dropdown-item>
              <el-dropdown-item>stop</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>



<script>
import { tableData } from "@/utils/table.js";
export default {
  props: ["tableSet"],
  data() {
    return {
      tableData
    };
  },
  mounted() {
    console.log(tableData, 111111);
  },
  methods: {
    handleClick() {},
    handleRowClick(row, column, event) {
      console.log(row, column, event);
    }
  }
};
</script>



<style lang="scss" scoped>
.basetable-container {
  width: 98%;
  background: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 25px 20px;
  height: 650px;
  margin-bottom: 20px;
  border-radius: 8px;
  .user-logo {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-left: 50px;
    margin-top: 10px;
  }
}
</style>
